<!-- <template>
    <div>
        <p>距离目标时间还有：</p>
        <p>{{ days }} 天 {{ hours }} 小时 {{ minutes }} 分钟 {{ seconds }} 秒</p>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const targetDate = new Date('2023-12-31T23:59:59') // 目标时间
const days = ref(0)
const hours = ref(0)
const minutes = ref(0)
const seconds = ref(0)
onMounted(() => {
    updateCountdown() // 初始化倒计时
    setInterval(updateCountdown, 1000) // 每秒更新倒计时
})
const updateCountdown = () => {
    const currentDate = new Date()
    const timeDiff = targetDate - currentDate
    days.value = Math.floor(timeDiff / (1000 * 60 * 60 * 24))
    hours.value = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    minutes.value = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60))
    seconds.value = Math.floor((timeDiff % (1000 * 60)) / 1000)
}
</script> -->
<template>
    <div class="gradient" :style="gradientStyle"></div>
</template>

<script>
export default {
    data() {
        return {
            topColor: '#ff0000',
            bottomColor: '#00ff00',
            leftColor: '#0000ff',
            rightColor: '#ffff00',
        }
    },
    computed: {
        gradientStyle() {
            return {
                background: `linear-gradient(to top, ${this.topColor}, ${this.bottomColor}),
                       linear-gradient(to bottom, ${this.bottomColor}, ${this.topColor}),
                       linear-gradient(to left, ${this.leftColor}, ${this.rightColor}),
                       linear-gradient(to right, ${this.rightColor}, ${this.leftColor})`,
            }
        },
    },
}
</script>

<style>
.gradient {
    width: 200px;
    height: 200px;
    /* 其他样式 */
}
</style>
